<!DOCTYPE html>
<html lang="en">
<head>
    <title>用户管理</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/user.css') }}"/>
</head>
<body class="pear-container">
{# 查询表单 #}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="user-query-form">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="gname" placeholder="" class="layui-input">
                </div>
                <label class="layui-form-label">库存</label>
                <div class="layui-input-inline">
                    <input type="text" name="gnum" placeholder="" class="layui-input">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>


<div class="user-left user-collasped">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="button button-primary user-group" user-group=""> 全 部 用 户</div>
            <div class="button button-default user-group" user-group="-1"> 默 认 分 组</div>
            <div style="overflow: auto">
                <ul id="dept-tree" class="dept-tree" data-id="0"></ul>
            </div>
        </div>
    </div>
</div>


{# 用户表格 #}
<div class="user-main user-collasped">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>
        </div>
    </div>
</div>
</body>
{# 表格操作 #}
<script type="text/html" id="user-toolbar">
    {#    {% if authorize("admin:user:add") %}#}
{#    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">#}
{#        <i class="pear-icon pear-icon-add"></i>#}
{#        新增#}
{#    </button>#}
    {#    {% endif %}#}
    {#    {% if authorize("admin:user:remove") %}#}
    <button class="pear-btn pear-btn-md" lay-event="batchRemove">
        <i class="pear-icon pear-icon-ashbin"></i>
        批量删除
    </button>

    {#        <button class="pear-btn pear-btn-md" lay-event="add_classify">#}
    {#            <i class="pear-icon pear-icon-add"></i>#}
    {#                  新增分类#}
    {#        </button>#}
    {#    {% endif %}#}
    {#    <button class="pear-btn pear-btn-md" lay-event="collasped">#}
    {#        <i class="pear-icon pear-icon-modular"></i>#}
    {#        高级#}
    {#    </button>#}
</script>

{# 用户修改操作 #}
<script type="text/html" id="user-bar">
    {#    {% if authorize("admin:user:edit") %}#}
{#    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">#}

{#        <i class="layui-icon-list"></i>#}
        {#            <i class="pear-icon pear-icon-edit"></i>#}
{#    </button>#}

    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="select">
        <i class="layui-icon layui-icon-list" style="font-size: 30px; color: #ffffff;"></i>
{#        <i class="pear-icon pear-icon-edit"></i>#}
        {#            <i class="pear-icon pear-icon-edit"></i>#}
    </button>
    {#    {% endif %}#}
    {#    {% if authorize("admin:user:remove") %}#}
    {#        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i#}
    {#                class="pear-icon pear-icon-ashbin"></i>#}
    {#        </button>#}
    {#    {% endif %}#}
</script>

{# 启动与禁用 #}
<script type="text/html" id="user-enable">
    <input type="checkbox" name="enable" value="{{ "{{ d.is_on_sale }}" }}" lay-skin="switch" lay-text="上架|下架"
           lay-filter="user-enable"
            {{ "{{# if(d.enable==1){ }} checked {{# } }}" }} />
</script>

{#<script type="text/html" id="order_price">#}
{#    {% if d.order_price==1 %}#}
{#     <span class="layui-badge layui-bg-green">已支付</span>#}
{#        {% else %}#}
{#     <span class="layui-badge layui-bg-green">已取消</span>#}
{#    {% endif %}#}

{#    <input type="checkbox" name="order_price" value="{{ "{{ d.order_price }}" }}" lay-skin="switch" lay-text="上架|下架"#}
{#           lay-filter="order_price"#}
{#            {{ "{{# if(d.enable==1){ }} checked {{# } }}" }} />#}
{#</script>#}


{# 用户注册时间 #}
<script type="text/html" id="user-createTime">
    {{ '  {{layui.util.toDateString(d.create_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

{# 用户更新时间 #}
<script type="text/html" id="user-updateTime">
    {{ '  {{layui.util.toDateString(d.update_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

{% include 'admin/common/footer.html' %}

<script>
    layui.use(['table', 'dtree', 'form', 'jquery', 'popup', 'common'], function () {
        let table = layui.table
        let form = layui.form
        let $ = layui.jquery
        let dtree = layui.dtree
        let popup = layui.popup
        let common = layui.common
        let MODULE_PATH = '/orders/'

        // 表格数据
        let cols = [
            [
                {#        {% if authorize("admin:user:remove") %}#}
                {type: 'checkbox'},
                {#        {% endif %}#}
                {title: '订单编号', field: 'order_sn', align: 'center', width: 110},
                {title: '用户ID', field: 'openid', align: 'center'},
                {title: '订单金额', field: 'order_price', unresize: true, align: 'center'},
                {title: '实际支付', field: 'yuan_price', unresize: true, align: 'center'},
                {
                    title: '支付状态', field: 'pay_status', align: 'center', templet: function (d) {
                        if (d.pay_status == 1) {
                            console.log('order_price:', d.order_status)
                            return "<span class='layui-badge layui-bg-green'>已支付</span>"
                        } else {
                            return "<span class='layui-badge'>已取消</span>"
                        }
                    }, width: 120
                },
                {
                    title: '订单状态', field: 'order_status', align: 'center', templet: function (d) {
                        if (d.order_status == 1) {
                            console.log('order_price:', d.order_status)
                            return "<span class='layui-badge layui-bg-green'>已完成</span>"
                        } else if (d.order_status == 2) {
                            return "<span class='layui-badge'>已取消</span>"
                        } else {
                            return "<span class='layui-badge'>已出货</span>"
                        }
                    }, width: 120
                },
                {
                    title: '订单类型', field: 'send_type', align: 'center', templet: function (d) {
                        if (d.send_type == 0) {
                            {#console.log('order_price:', d.send_type)#}
                            return "<span class='layui-badge layui-bg-green'>店内自取</span>"
                        } else if (d.send_type == 1) {
                            return "<span class='layui-badge'>外卖</span>"
                        } else {
                            return "<span class='layui-badge'>未选择</span>"
                        }
                    }, width: 120
                },
                {title: '添加时间', field: 'add_time', templet: '#user-createTime', align: 'center'},
                {title: '更新时间', field: 'update_time', templet: '#user-updateTime', align: 'center'},
                {title: '操作', toolbar: '#user-bar', align: 'center', width: 130}
            ]
        ]

        // 渲染表格数据
        table.render({
            elem: '#user-table',
            url: MODULE_PATH + 'data',
            page: true,
            cols: cols,
            skin: 'line',
            height: 'full-148',
            toolbar: '#user-toolbar', /*工具栏*/
            text: {none: '暂无订单信息'},
            defaultToolbar: [{layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports'] /*默认工具栏*/
        })

        // 公司部门树状图菜单
        {#dtree.render({#}
        {#  elem: '#dept-tree',#}
        {#  method: 'get',#}
        {#  url: '/dept/tree',#}
        {#  dataFormat: 'list',#}
        {#  line: true,#}
        {#  skin: 'laySimple',#}
        {#  icon: '-1',#}
        {#  response: { treeId: 'deptId', parentId: 'parentId', title: 'deptName' },#}
        {#//})#}
        {##}
        {#// 菜单栏渲染#}
        {#dtree.on('node(\'dept-tree\')', function (obj) {#}
        {#  let field = form.val('user-query-form') /*用户账号查询*/#}
        {#  field.deptId = obj.param.nodeId#}
        {#window.refresh(field)#}
        {#//})#}

        //
        $('.user-group').click(function () {
            let group = $(this).attr('user-group')
            let field = form.val('user-query-form')
            if (group === '-1') {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).prev().removeClass('button-primary')
                $(this).prev().addClass('button-default')
                $(this).addClass('button-primary')
            } else {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).next().removeClass('button-primary')
                $(this).next().addClass('button-default')
                $(this).addClass('button-primary')
            }
            window.refresh(field)
        })

        table.on('tool(user-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj)
            } else if (obj.event === 'edit') {
                window.edit(obj)
            } else if (obj.event === 'photo') {
                console.log(obj)
                window.photo(obj)
            }else if(obj.event==='select'){
                window.select(obj)
            }
        })

        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'add') {
                window.add()
            } else if (obj.event === 'refresh') {
                window.refresh()
            } else if (obj.event === 'add_classify') {
                window.add_classify()
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj)
            } else if (obj.event === 'collasped') {
                $('.user-left').toggleClass('user-collasped')
                $('.user-main').toggleClass('user-collasped')
                table.resize()
            }
        })

        form.on('submit(user-query)', function (data) {
            window.refresh(data.field)
            return false
        })

        form.on('switch(user-enable)', function (obj) {
            let operate
            if (obj.elem.checked) {
                operate = 'enable'
            } else {
                operate = 'disable'
            }
            let loading = layer.load()
            $.ajax({
                url: '/goods/' + operate,
                data: JSON.stringify({gid: this.value}),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    layer.close(loading)
                    if (result.success) {
                        popup.success(result.msg)
                    } else {
                        popup.failure(result.msg)
                    }
                }
            })
        })

        window.add = function () {
            layer.open({
                type: 2,
                title: '新增商品',
                shade: 0.1,
                area: ['850px', '530px'],
                content: MODULE_PATH + 'add',
                end: function () {
                }
            })
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['550px', '500px'],
                content: MODULE_PATH + 'edit/' + obj.data['id'],

            })
        }

        window.select = function (obj) {
            console.log(obj.data)
            layer.open({
                type: 2,
                title: '详细展示',
                shade: 0.1,
                area: ['850px', '550px'],
                content: MODULE_PATH + 'select/' + obj.data['order_sn'],

            })
        }


        {#新增分类#}
        window.add_classify = function () {
            layer.open({
                type: 2,
                title: '新增分类',
                shade: 0.1,
                area: ['550px', '250px'],
                content: MODULE_PATH + '/classifyadd'
            })
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该商品', {icon: 3, title: '提示'}, function (index) {
                layer.close(index)
                let loading = layer.load()
                $.ajax({
                    url: MODULE_PATH + 'remove/' + obj.data['order_sn'],
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading)
                        if (result.success) {
                            popup.success(result.msg, function () {
                                obj.del()
                            })
                        } else {
                            popup.failure(result.msg)
                        }
                    }
                })
            })
        }

        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data
            if (data.length === 0) {
                layer.msg('未选中数据', {
                    icon: 3,
                    time: 1000
                })
                return false
            }
            var ids = []
            var hasCheck = table.checkStatus('user-table')
            var hasCheckData = hasCheck.data
            if (hasCheckData.length > 0) {
                $.each(hasCheckData, function (index, element) {
                    console.log('element.id:',element.order_sn)
                    ids.push(element.order_sn)
                })
            }
            {#console.log(ids);#}
            layer.confirm('确定要删除选中角色', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index)
                let loading = layer.load()
                $.ajax({

                    url: MODULE_PATH + 'batchRemove',
                    data: {ids: ids},
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading)
                        if (result.success) {
                            popup.success(result.msg, function () {
                                table.reload('user-table')
                            })
                        } else {
                            popup.failure(result.msg)
                        }
                    }
                })
            })
        }

        window.refresh = function (param) {
            table.reload('user-table', {where: param})
        }

        // 查看大图
        window.photo = function (obj) {
            if (!obj.data.iconPath || obj.data.iconPath === '') {
                layer.msg('图片地址错误！')
                return
            }
            var auto_img = {}
            var img = new Image()
            img.src = obj.data.iconPath
            console.log('img.src:', img.src)
            img.onload = function () {
                var max_height = $(window).height() - 100
                var max_width = $(window).width()
                var rate1 = max_height / img.height
                var rate2 = max_width / img.width
                var rate3 = 1
                var rate = Math.min(rate1, rate2, rate3)
                auto_img.height = img.height * rate
                auto_img.width = img.width * rate
                layer.open({
                    type: 1,
                    title: false,
                    area: ['auto'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: '<img src=\'' + obj.data['iconPath'] + '\' width=\'' + auto_img.width + 'px\' height=\'' + auto_img.height + 'px\'>'
                })
            }
        }

    })
</script>
</html>